import React, { Component } from 'react'
import { Button, Picker } from 'antd-mobile'
import 单机棋盘 from './单机棋盘'
import 对战棋盘 from './对战棋盘'

const 按钮 = {
    width: 80,
    margin: 3
}
class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            模式: localStorage.模式 ? localStorage.模式 : "对战", // 单机/对战
            AI搜索深度: localStorage.AI搜索深度 ? parseInt(localStorage.AI搜索深度) : 4,
            阵营: localStorage.阵营 ? parseInt(localStorage.阵营) : 1 // 1:红方,-1:蓝方
        }
    }

    componentDidMount = () => {
        this.初始化棋盘()
    }

    初始化棋盘 = () => {
        const { 模式, AI搜索深度, 阵营 } = this.state
        if (模式 == "单机") {
            this.refs.棋盘.初始化(AI搜索深度)
        } else {
            this.refs.棋盘.初始化(阵营)
        }
    }


    开始 = (等级) => {
        this.refs.棋盘.开始()
    }

    悔棋 = () => {
        this.refs.棋盘.悔棋()
    }

    选择模式 = () => {
        let { 模式 } = this.state
        模式 = 模式 == "单机" ? "对战" : "单机"
        localStorage.模式 = 模式
        this.setState({ 模式 }, () => {
            this.初始化棋盘()
        })
    }

    选择AI搜索深度 = (val) => {
        localStorage.AI搜索深度 = val[0]
        this.setState({ AI搜索深度: val[0] }, () => {
            this.初始化棋盘()
        })
    }

    选择阵营 = () => {
        let { 阵营 } = this.state
        阵营 = 阵营 == -1 ? 1 : -1
        localStorage.阵营 = 阵营
        this.setState({ 阵营 }, () => {
            this.初始化棋盘()
        })
    }

    render() {
        const { 模式, AI搜索深度, 阵营 } = this.state
        let AI等级
        switch (AI搜索深度) {
            case 2:
                AI等级 = "初级"
                break;
            case 3:
                AI等级 = "中级"
                break;
            case 4:
                AI等级 = "高级"
                break;
            default:
                break;
        }
        return (
            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                {模式 == "单机" ?
                    (<单机棋盘 ref="棋盘" />)
                    :
                    (<对战棋盘 ref="棋盘" />)}
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                    <Button style={按钮} type="primary" size="small" onClick={this.选择模式}>{模式}</Button>
                    {模式 == "单机" ? (
                        <Picker data={[
                            { value: 2, label: "初级" },
                            { value: 3, label: "中级" },
                            { value: 4, label: "高级" }]}
                            value={[AI搜索深度]} onChange={this.选择AI搜索深度} cols={1}>
                            <Button style={按钮} type="primary" size="small">{AI等级}</Button>
                        </Picker>
                    ) : (
                            <Button style={按钮} type="primary" size="small" onClick={this.选择阵营}>{阵营 == 1 ? "红方" : "蓝方"}</Button>
                        )}
                    <Button style={按钮} type="primary" size="small" onClick={this.开始}>重开</Button>
                    <Button style={按钮} type="primary" size="small" onClick={this.悔棋}>悔棋</Button>
                </div>
            </div>
        )
    }
}

export default App
